Window Size Classes 視窗尺寸類別
視窗尺寸類別是佈局調整的關鍵斷點，決定了 UI 如何適應不同裝置的空間、使用習慣和人體工程學。所有裝置可歸入以下三類之一：
- 緊湊型（Compact）適用於小屏裝置，如手機。
- 中等（Medium）適用於中等螢幕，如小型平板。
- 擴充套件型（Expanded）適用於大屏裝置，如平板或桌面端。
應專注於視窗尺寸類別而非具體螢幕尺寸，以確保佈局適配性和相容性。
視窗尺寸類別（Window Size Classes）
1. 寬度分類：
視窗尺寸類別基於 dp進行劃分，適用於不同裝置和螢幕模式：
| 類別 | 寬度範圍（dp） | 常見裝置 |
| 緊湊型（Compact） | <600 | 手機（豎屏） |
| 中等（Medium） | 600 - 840 | 平板（豎屏）、摺疊屏（展開） |
| 擴充套件型（Expanded） | 840 - 1200 | 手機（橫屏）、平板（橫屏）、桌面端 |
附加類別（適用於 Web & 桌面端）：
| 類別 | 寬度範圍（dp） | 常見裝置 |
| 大型（Large） | 1200 - 1600 | 桌面端 |
| 超大（Extra-large） | ≥1600 | 超寬桌面端 |
2. 高度分類
Android 還提供高度視窗尺寸類別，適用於調整佈局，如：但由於大部分佈局支援垂直滾動，通常無需專門適配高度變化。
- 橫屏模式（螢幕高度較小）
- 展開式摺疊屏（螢幕高度較大）
3. Design for window size classes instead of specific devices because 設計建議
優先設計視窗尺寸類別，而非特定裝置
- 螢幕可變性高，使用者行為（如分屏、摺疊屏展開）會動態改變可用視窗空間。
- 裝置在不同方向（橫/豎屏）下可能屬於不同視窗尺寸類別。
跨視窗類別設計
推薦設計策略：
先設計一種視窗類別，再擴充套件至更大尺寸，確保一致性。
1 What should be revealed? 關鍵設計考慮
顯示哪些內容？
較小視窗：預設隱藏部分 UI，僅在需要時顯示，如摺疊式導航欄。
較大視窗：可同時顯示多個窗格，例如資訊列表+對話內容，提高效率。
緊湊型 UI 僅顯示對話列表，點選後進入詳情頁。擴充套件型 UI 直接顯示對話列表 + 選定對話，減少頁面切換。
螢幕劃分：
三種視窗尺寸的大致佈局
保持一致性：不同尺寸裝置應提供類似的使用者體驗，而不是完全不同的介面。
中等視窗（Medium） 可以使用雙窗格佈局，但需注意：複雜列表項可能影響可讀性，導致內容過於緊湊。低密度內容（如設定頁面）更適合雙窗格，便於快速導航。
裝置旋轉能變為中等或緊湊型視窗
單面板佈局可聚焦於單一任務，提供沉浸式體驗，適用於：
- 遊戲
- 電影播放
- 視訊通話
- 創意應用
推薦調整大小的元素：
- 卡片（Cards）
- 資訊流（Feeds）
- 列表（Lists）
- 面板（Panes）
手機上的橫向卡片可在平板上變成更方正的形狀，提高可讀性。文字列表可調整邊距、行距、字型大小，保持 40-60 個字元/行的最佳可讀性。
UI 元件可以重新排列，以適應擴充套件螢幕上的額外空間，同時提升互動體驗。推薦重新定位的元素：
- 卡
- 增加第二列內容（如網格佈局）
- 更復雜的圖片排列（如瀑布流）
- 增加留白（提高可讀性）
- 最佳化導航 & 互動元素的可觸及性
操作按鈕（FAB）在不同螢幕尺寸下始終居中對齊。保持相對位置一致，確保按鈕隨螢幕縮放時內容不變形。
